
<!--购物车-->


<template>
  <div>
    <div style="width: 951px;margin:20px auto;border: 1px solid #95db58 ;padding: 10px ">
      <div style="height: 67px;width: 952px;background-color:#dcffbd;margin-bottom:10px ;position: relative;overflow: hidden">
        <img src="../assets/img/sh.jpg" alt="" class="donghua">
      </div>
      <el-table
          :data="catList.slice((currentPage-1)*PageSize,currentPage*PageSize)"
          border
          style="width: 100%">
        <el-table-column fixed type="index" label="序号" width="50"></el-table-column>
        <el-table-column fixed prop="lineName" label="线路名称" width="150"></el-table-column>
        <el-table-column fixed prop="typeName" label="线路类型" width="150"></el-table-column>
        <el-table-column fixed prop="vehicle" label="交通工具" width="150"></el-table-column>
        <el-table-column fixed prop="days" label="出游天数" width="150"></el-table-column>
        <el-table-column fixed prop="price" label="价格" width="150"></el-table-column>
        <el-table-column fixed label="操作" width="150">
          <template #default="scope">
            <el-button
                size="mini"
                @click="postOrder( scope.row)">下单</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="delCat( scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="catList.length"
          style="margin: 20px 0px 0px">
      </el-pagination>
    </div>
    <div>
      <el-popover
          placement="right"
          :width="400"
          trigger="click"
      >
        <template #reference>
          <el-button type="success" plain>查看历史订单</el-button>
        </template>
        <el-table :data="orderList">
          <el-table-column width="134" property="lineName" label="线路名称"></el-table-column>
          <el-table-column width="133" property="days" label="出游天数"></el-table-column>
          <el-table-column width="133" property="count" label="总金额"></el-table-column>
        </el-table>
      </el-popover>
    </div>
  </div>


</template>

<script>
export default {
  name: "shopPage",
  data(){
    return{
      catList:[],
      // 默认显示第几页
      currentPage:1,
      // 默认每页显示的条数
      PageSize:10,
      orderList:[],
      token:localStorage.getItem("TOKEN"),
      userInfo:{}
    }
  },
  created() {
    this.$axios.get("api/customer/token", {headers: {TOKEN: this.token}}).then(res => {
      this.userInfo = res.data.data;
      this.getCat() ,
      this.getOrder()
    })

  },
  methods:{
    getCat:function (){
      this.$axios.post("/api/customer/cat",this.userInfo).then(res =>{
        this.catList=res.data
      })
    },
    postOrder:function (val){
      console.log(val)
      this.$router.push({path:'/addOrder' ,query:{info:val}})

    } ,
    getOrder:function (){
      this.$axios.post("/api/customer/get/order",this.userInfo).then(res =>{
        this.orderList=res.data
      })
    },
    delCat:function (val){
      this.$axios.delete("/api/customer/cat/"+ val.carID).then(res =>{
        this.$message.warning(res.data.msg);
        location.reload();
      })
    },
// 分页
// 每页显示的条数
handleSizeChange(val) {
  // 改变每页显示的条数
  this.PageSize = val
  // 在改变每页显示的条数时，要将页码显示到第一页
  this.currentPage = 1
},
// 显示第几页
handleCurrentChange(val) {
  // 改变默认的页数
  this.currentPage = val
},
  }
}
</script>

<style scoped>
.donghua{
  position: absolute;
  animation: mz 5.5s linear 0s infinite;
}
@keyframes  mz {
  0%{
    left: -74px;
  }
  100%{
    left: 1062px;
  }
}
</style>